<template>
	<a-modal v-bind="options" class="import-data-dialog">
		<vxe-grid ref="grid" v-bind="gridOptions" class="energy">
			<template #toolbar>
				<vxe-toolbar>
					<template #buttons>
						<div class="toolbar-action">
							导入时间：
							<span>{{ props.data.createTime }}</span>
						</div>

						<div class="toolbar-action">
							导入人员：
							<span>{{ props.data.createName }}</span>
						</div>

						<div class="toolbar-action">
							人员所属部门：
							<span>{{ props.data.deptName }}</span>
						</div>
					</template>
				</vxe-toolbar>
			</template>
			<template #headerName="{column}">
				<span v-color="{color: 'danger'}">*</span>
				{{ column.title }}
			</template>
			<template #headerPhone="{column}">
				<span v-color="{color: 'danger'}">*</span>
				{{ column.title }}
			</template>
			<template #headerIdCare="{column}">
				<span v-color="{color: 'danger'}">*</span>
				{{ column.title }}
			</template>
			<template #headerSex="{column}">
				<span v-color="{color: 'danger'}">*</span>
				{{ column.title }}
			</template>
			<template #gender="{row}">{{ row.gender === 1 ? '男' : '女' }}</template>

			<template #headerEmployee="{column}">
				<span v-color="{color: 'danger'}">*</span>
				{{ column.title }}
			</template>
			<template #headerCode="{column}">
				<span v-color="{color: 'danger'}">*</span>
				{{ column.title }}
			</template>
			<template #laborContractBeginTime="{row}">
				<span>{{ row.laborContractBeginTime }}</span>
			</template>
			<template #content="{row, rowIndex}">
				<a-button type="link" v-if="row.uploadStatus" @click="fileImageUpload(row, rowIndex)">查看</a-button>
				<a-button type="text"  v-else >未上传</a-button>
			</template>
			<template #laborContractEndTime="{row}">
				<span>{{ row.laborContractEndTime }}</span>
			</template>
		</vxe-grid>
	</a-modal>
	<!-- 附件上传 -->
	<file-upload-dialog v-model:visible="visibles.attachment" :is-details="isDetails" :bizId="bizId" @success="setTableattachments" />
	<!-- 回显附件 -->
</template>

<script lang="ts" setup>
	import {watchEffect, toRef, reactive, ref, watch} from 'vue'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {EyeFilled} from '@ant-design/icons-vue'
	import {proxyConfigProps, importProxyConfigProp} from 'yuxin-base/src/utils/vxe-table'
	import DATE_FORMAT from 'yuxin-base/src/utils/date'
	import FileUploadDialog from '@/components/common/file-upload-dialog.vue'
	import {recordList, updateEmployment} from '@/api/staff-pool'
	import {VxeGridPropTypes} from 'vxe-table/types/grid'

	const props = withDefaults(
		defineProps<{
			visible: boolean
			id: null | string
			//父组件传值，仅显示
			data: object | any
		}>(),
		{
			// eslint-disable-next-line vue/require-valid-default-prop
			data: {}
		}
	)
	const generateBillBtnShow = ref<boolean>(false)
	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		title: '导入数据',
		width: 1300,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		footer: false,
		bodyStyle: {padding: '15px'},
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const defaultParams = reactive<any>({
		id: null
	})

	const storeOptions = ref<any>([])
	const bizId = ref<any>('')
	const grid = ref<any>()
	const gridOptions = reactive<VxeGridProps>({
		height: 'auto',
		showOverflow: true,
		rowConfig: {
			height: 60,
			isHover: true
		},
		columns: [
			{
				title: '员工姓名',
				minWidth: 120,
				align: 'left',
				field: 'employeeName',
				slots: {
					header: 'headerName'
				}
			},
			{
				title: '员工电话',
				minWidth: 150,
				align: 'left',
				field: 'phone',
				slots: {
					header: 'headerPhone'
				}
			},
			{
				minWidth: 180,
				title: '员工身份证号',
				align: 'left',
				field: 'idCard',
				slots: {
					header: 'headerIdCare'
				}
			},
			{
				minWidth: 100,
				title: '员工性别',
				align: 'left',
				field: 'price',
				slots: {
					header: 'headerSex',
					default: 'gender'
				}
			},
			{
				minWidth: 150,
				title: '劳动合同开始日期',
				align: 'left',
				slots: {
					default: 'laborContractBeginTime'
				}
			},
			{
				minWidth: 150,
				title: '劳动合同结束日期',
				align: 'left',
				slots: {
					default: 'laborContractEndTime'
				}
			},
			{
				minWidth: 260,
				title: '所属企业',
				align: 'left',
				field: 'enterpriseName',
				slots: {
					header: 'headerEmployee'
				}
			},
			{
				minWidth: 260,
				title: '社会统一信用代码',
				align: 'left',
				field: 'societyCode',
				slots: {
					header: 'headerCode'
				}
			},
			{
				minWidth: 150,
				fixed: 'right',
				align: 'left',
				title: '在职证明',
				slots: {
					default: 'content'
				}
			}
		],
		pagerConfig: proxyConfigProps,
		proxyConfig: {
			props: importProxyConfigProp,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					// return billApi.recordPage({...defaultParams, current, size})
					return recordList({...defaultParams, current, size})
				}
			}
		}
	})
	const getList = (page?: any) => {
		grid.value.commitProxy(page === 1 ? 'reload' : 'query')
	}
	// 在职证明附件
	const visibles = reactive({
		attachment: false,
		records: false,
		dataList: [],
		tableList: [],
		current: 1,
		size: 15,
		total: 0
	})
	const attachments = ref<Img[]>([])
	const attachmentIndex = ref<number>(0)
	const fileList = ref<any[]>([])
	const isDetails = ref<boolean>(false)
	const fileImageUpload = (row, index) => {
		if(!row.uploadStatus)return
		isDetails.value = row.uploadStatus?true:false
		bizId.value = row.employeeId
		attachments.value = []
		attachmentIndex.value = index

		visibles.attachment = true
	}
	const setTableattachments = () => {
		// if (!attachments.value.length) return

	}

	watchEffect(() => {
		if (props.visible) {
			defaultParams.id = props.id
		}
	})
</script>

<style lang="less">
	.import-data-dialog {
		.ant-modal-body {
			overflow: auto;
			min-height: 600px;
			max-height: 900px;
			height: calc(100vh - 150px);
		}

		.vxe-toolbar {
			padding: 5px 0 20px;
		}

		.toolbar-action {
			color: #86909cff;
			width: 25%;

			span {
				color: #000000d9;
			}
		}

		.select-width {
			width: 275px;
		}
	}
</style>
